<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        MVVM模型
            1. M：模型(Model) ：data中的数据
            2. V：视图(View) ：模板代码
            3. VM：视图模型(ViewModel)：Vue实例
        观察发现：
            1.data中所有的属性，最后都出现在了vm身上。
            2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
        
        M => VM => V
        V => VM => M
	-->
    <!--view-->
    <div id="root">
        <h1>
            {{name}}
        </h1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //view model view与model之间的纽带 俗称 vm
    //vm view实例对象
    new Vue({
        el: "#root",
        data() { //model 模型 是指data里的数据
            return {
                name: '啊啊',
            }
        }
    })
</script>

</html>